import React, { Component } from 'react';
import { Upload, Icon, Modal } from 'antd';
import API from '../../services/ipConfig'
import styles from './index.less'

class uploadImg extends Component {
  state = {
    previewVisible: false,
    previewImage: '',

  };



  handleCancel = () => this.setState({ previewVisible: false })

  handlePreview = (file) => {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  }



  render() {

    const { previewVisible, previewImage } = this.state;
    const { fileList, newImgs } = this.props
    console.log('upload',fileList)
    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">上传图片</div>
      </div>
    );

    const actionurl=`${API}/resource/upload`;
    return (
       <div className="clearfix">
         <Upload
           action={actionurl}
           listType="picture-card"
           fileList={fileList && fileList.length > 0 ? fileList : newImgs}
           onPreview={this.handlePreview}
           onChange={this.props.handleChange}
           onRemove={this.props.onRemove}
         >
           { fileList && fileList.length >=4 && newImgs &&  newImgs.length >= 4 ? null : uploadButton}
         </Upload>
         <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
           <img alt="example" style={{ width: '100%' }} src={previewImage} />
         </Modal>
       </div>

    );
  }
}

export default uploadImg;



{/* <div>

<Upload
  action="http://192.168.100.50:8080/resource/upload"
  listType="picture-card"
  fileList={fileList}
  onPreview={this.handlePreview}
  beforeUpload={this.props.beforeUpload}
  onRemove={this.onRemove}
>
  {fileList && fileList.length >= 4 ? null : uploadButton}
</Upload>
<Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
  <img alt="example" style={{ width: '100%' }} src={previewImage} />
</Modal>

</div> */}
